<template>
  <view>
    <view class="f_mine_box">
      <view class="f_mine">
        <view class="f_mine_head">
          <view class="img_cion">
            <image src="/static/images/logos.png" mode=""></image>
          </view>
          <view class="xinyong">
            <text class="line">我的信用积分</text>
          </view>
          <view class="jindu">
            <text class="fen">{{ verifiedInfo.xinyongfen }}分</text>
            <view class="jindutiao"></view>

          </view>
          <!-- <view class="container">
            <progress :percent="percent" />
            <text class="value"
                  :style="{ color: valueColor }">{{ value }}</text>
            <text class="level"
                  :style="{ color: levelColor }">{{ level }}</text>
          </view> -->
        </view>
        <view class="myslide">
          <u-swiper :list="swiperList" height="174rpx" radius="30" keyName="path"></u-swiper>
        </view>
        <view class="f_mine_body">
          <view class="f_table">
         <!--   <view class="item">
              <navigator url="/pages/mine/verified" class="nav">
                <image src="/static/images/idcard.png" mode=""></image>
                <view class="" v-if="verifiedInfo.rz_status == 0">
                  实名认证
                  <text style="background-color:#919189;margin-left:40rpx;padding: 0 15rpx;"
                    :decode="true">&nbsp;&nbsp;未认证&nbsp;&nbsp;</text>
                </view>
                <view class="" v-if="verifiedInfo.rz_status == 1">
                  实名认证
                  <text style="background-color:#ffeb3b;margin-left:40rpx;padding: 0 15rpx;"
                    :decode="true">&nbsp;&nbsp;审核中&nbsp;&nbsp;</text>
                </view>
                <view class="" v-if="verifiedInfo.rz_status == 2">
                  实名认证
                  <text style="background-color:#39E230;margin-left:40rpx;padding: 0 15rpx;"
                    :decode="true">&nbsp;&nbsp;已认证&nbsp;&nbsp;</text>
                </view>
              </navigator>
            </view> -->
            <view class="item">
              <navigator url="/pages/mine/set_account" class="nav">
                <image src="/static/images/my1.png" mode=""></image>
                <view class="">
                  密码修改
                </view>
              </navigator>
            </view>
			<view class="item">
			  <navigator url="/pages/mine/bank_card_list" class="nav">
			    <image src="/static/images/my6.png" mode=""></image>
			    <view class="">
			      出金绑定
			    </view>
			  </navigator>
			</view>
            <view class="item">
              <navigator url="" class="nav" @click="openKF(KF)">
                <image src="/static/images/my2.png" mode=""></image>
                <view class="">
                  在线客服
                </view>
              </navigator>
            </view>
            <view class="item">
              <navigator url="/pages/mine/msg_view?id=1" class="nav">
                <image src="/static/images/my3.png" mode=""></image>
                <view class="">
                  隐私政策
                </view>
              </navigator>
            </view>
            <view class="item">
              <navigator url="/pages/mine/msg_view?id=2" class="nav">
                <image src="/static/images/my4.png" mode=""></image>
                <view class="">
                  关于我们
                </view>
              </navigator>
            </view>
          <!--  <view class="item">
              <navigator url="/pages/mine/add_bank_card" class="nav">
                <image src="/static/images/my5.png" mode=""></image>
                <view class="">
                  添加银行卡
                </view>
              </navigator>
            </view> -->
         
            <view class="item">
              <navigator url="" class="nav" @click="signOut">
                <image src="/static/images/my4.png" mode=""></image>
                <view class="">
                  退出登录
                </view>
              </navigator>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

import {
  url,
  getMenu,
  verified,
  service
} from '@/config/api.js'
export default {
  data() {
    return {
      swiperList: [],
      KF: uni.getStorageSync('KF'),
      verifiedInfo: {},
      value: 650, // 假设当前值为 650
      percent: 0, // 初始进度为 0
      level: '', // 初始信用度等级为空
      valueColor: '', // 初始数值颜色为空
      levelColor: '' // 初始等级颜色为空
    };
  },
  onShow() {
    this.getSwiper()
    this.getVerified()
    this.getService()
  },
  methods: {
    // 客服
    getService() {
      service().then(res => {
        console.log('客服', res);
        this.KF = res.data
        uni.setStorageSync('KF', res.data)
      })
    },
    // 实名信息查询接口
    getVerified() {
      verified({
        params: {
          uid: uni.getStorageSync('uid')
        }
      }).then(res => {
        console.log('实名信息', res);
        this.verifiedInfo = res.data
        this.value = res.data.xinyongfen
        // this.percent = Math.floor(this.value / 1000 * 100)
        if (this.value < 500) {
          this.level = '信用度差'
          this.levelColor = '#eb4a2f'
          this.valueColor = '#eb4a2f'
        } else if (this.value < 650 && this.value > 500) {
          this.level = '信用度良'
          this.levelColor = '#007aff'
          this.valueColor = '#007aff'
        } else if (this.value >= 650) {
          this.level = '信用度非常好'
          this.levelColor = '#42b983'
          this.valueColor = '#42b983'
        }
      }).catch(err => {
        console.log('err: ', err)
      })
    },
    // 获取轮播图
    getSwiper() {
      getMenu().then(res => {
        console.log('轮播图', res);
        // 拼接路径
        res.data.map(value => {
          value.path = url + value.path
        })
        this.swiperList = res.data
      })
    },
    signOut() {
      uni.clearStorage()
      this.$Router.push('/pages/login/landing_page')
    },
    // 打开客服
    openKF(value) {
      window.open(value)
    },
  }
};
</script>

<style scoped lang="scss">
.f_mine_box {
  width: 100%;
  display: flex;
  flex-direction: column;

  .f_mine {
    color: #fff;

    .f_mine_head {
      background: url("../../static/images/myorderbkg.png") no-repeat 50% / cover;
      margin-bottom: 10px;
      padding: 40rpx 40rpx 60rpx;

      .img_cion {
        margin-right: 10px;

        image {
          width: 200rpx;
          height: 40rpx;
        }
      }

      .container {
        display: flex;
        flex-direction: column;
        align-items: center;

        .value {
          margin-top: 20rpx;
          font-size: 40rpx;
          color: #666;
        }

        .level {
          margin-top: 10rpx;
          font-size: 32rpx;
          color: #06c;
        }
      }

      .xinyong {
        font-size: 24rpx;
        margin-top: 36rpx;
        text-align: center;
        font-weight: 700;
        color: #fff;

        .line {
          position: relative;
          font-size: 26rpx;
          letter-spacing: 2rpx;
        }

        .line::before {
          position: absolute;
          content: "";
          width: 33px;
          top: 50%;
          right: -43px;
          height: 1px;
          background-color: #fff;
        }

        .line::after {
          position: absolute;
          content: "";
          width: 33px;
          top: 50%;
          left: -43px;
          right: -43px;
          height: 1px;
          background-color: #fff;
        }
      }

      .jindu {
        margin-top: 24px;
        height: 10px;
        background-color: #fff;
        border-radius: 11px;
        overflow: hidden;
        position: relative;

        .fen {
          position: absolute;
          right: 11px;
          z-index: 22;
          top: 0;
          font-size: 9px;
          line-height: 9px;
          font-weight: 700;
          color: #fffff;
        }

        .jindutiao {
          background-image: url("../../static/images/jindubkg.png");
          background-repeat: no-repeat;
          height: 10px;
          border-radius: 3px;
          background-size: 102%;
        }
      }
    }

    .myslide {
      padding: 0 16px;
    }

    .f_mine_body {
      .f_table {
        margin: 20rpx 30rpx;
        padding: 10rpx 32rpx;
        background-color: #262633;
        border-radius: 32rpx;

        .item {
          color: #fff;
          background: url("../../static/images/arrow_right.png") no-repeat 98% 50%/6px auto;

          .nav {
            display: flex;
            height: 102rpx;
            align-items: center;

            image {
              width: 14px;
              height: 14px;
              margin-right: 20px;
            }
          }
        }
      }
    }
  }
}
</style>
